<template>
  <div>
    <div class="box">
      <div class="one">
        <el-card>
          <div class="one_box">
            <div class="qm">
              <div>
                <p>OAO</p>
                累计收益：
                <el-select v-model="value" style="width: 80px" size="small">
                  <el-option label="节电" value="节电" />
                  <el-option label="节费" value="节费" />
                  <el-option label="减碳" value="减碳" />
                </el-select>
              </div>
              <div><span class="num"></span> RMB</div>
            </div>
            <div class="wn">
              <div>
                相比目标：
                <el-select v-model="value1" style="width: 80px" size="small">
                  <el-option label="节电" value="节电" />
                  <el-option label="节费" value="节费" />
                  <el-option label="减碳" value="减碳" />
                </el-select>
              </div>
              <div>
                <p>超过/不足</p>
                <span class="num"></span> kWh
              </div>
            </div>
          </div>
          <div class="two_box">
            <div id="three" style="height: 300px"></div>

            <div class="sele">
              过去十二个月能耗：
              <el-select
                v-model="value2"
                style="width: 80px"
                @change="handleMonth"
                size="small"
              >
                <el-option label="kWh" value="kwh" />
                <el-option label="RMB" value="rmb" />
                <el-option label="kgCO²" value="kgCO2" />
                <el-option label="tce" value="tce" />
              </el-select>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 6px; height: 354px">
          <div class="end">
            <div>未来能耗预测</div>
            <el-button @click="dialogFormVisible = true">预测结果</el-button>
          </div>
          <div class="end_two">
            <div>
              <div class="fon_css">
                <div>室外平均温度变动：</div>
                <div>
                  <el-input v-model="val1" style="width: 80px" size="small">
                  </el-input>
                  <el-button
                    :icon="Plus"
                    @click="val1++"
                    size="small"
                  ></el-button>
                  <el-button
                    :icon="Minus"
                    @click="val1--"
                    size="small"
                  ></el-button>
                </div>
              </div>
              <div class="fon_css">
                <div>夏季室内平均温度变动：</div>
                <div>
                  <el-input v-model="val2" style="width: 80px" size="small">
                  </el-input>
                  <el-button
                    :icon="Plus"
                    @click="val2++"
                    size="small"
                  ></el-button>
                  <el-button
                    :icon="Minus"
                    @click="val2--"
                    size="small"
                  ></el-button>
                </div>
              </div>
            </div>

            <div>
              <div class="fon_css">
                <div>冬季室内平均温度变动：</div>
                <div>
                  <el-input v-model="val3" style="width: 80px" size="small">
                  </el-input>
                  <el-button
                    :icon="Plus"
                    @click="val3++"
                    size="small"
                  ></el-button>
                  <el-button
                    :icon="Minus"
                    @click="val3--"
                    size="small"
                  ></el-button>
                </div>
              </div>

              <div class="fon_css">
                <div>入住率变动：</div>
                <div>
                  <el-input v-model="val4" style="width: 80px" size="small">
                  </el-input>
                  <el-button
                    :icon="Plus"
                    @click="val4++"
                    size="small"
                  ></el-button>
                  <el-button
                    :icon="Minus"
                    @click="val4--"
                    size="small"
                  ></el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="two">
        <el-card>
          <div class="title">高效日对比</div>
          <div class="qwe">
            <div id="one" style="height: 350px"></div>
            <div class="rq">
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="time"
                type="date"
                placeholder="请选择日期"
              />
            </div>
          </div>
          <div class="t_two">
            <div id="two" style="height: 330px"></div>
            <div class="rqs">
              <el-date-picker
                :disabled-date="disabledDate"
                v-model="time1"
                type="date"
                placeholder="请选择日期"
              />
            </div>
            <div class="aa">
              <p style="color: #8f9898; font-size: 15px">达标日比例</p>
              <p><span style="color: #6b9edc; font-size: 20px"></span>%</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!--弹出对话框-->
    <div>
      <el-dialog
        v-model="dialogFormVisible"
        width="30%"
        @open="opened"
        style="border-radius: 15px"
      >
        <template #title>
          <span class="dia_font">预测结果</span>
        </template>
        <div ref="four" style="height: 300px"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref, nextTick, reactive } from "vue";
import { Plus, Minus } from "@element-plus/icons-vue";
import { AdminInputs } from "@/api/model/admins";

import { ProjectGroupone, dataMonth } from "@/api/model/echarts";
import dayjs from "dayjs";

const time = ref("");
const time1 = ref("");
const value = ref("节费");
const value1 = ref("节电");
const value2 = ref("kWh");
const val1 = ref(0);
const val2 = ref(0);
const val3 = ref(0);
const val4 = ref(0);
const dialogFormVisible = ref(false);
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const four = ref(null);
let state = reactive({
  one: {
    indicatorName: "高效日对比",
    firstType: "节电分析",
    secondType: "",
    type: "year",
    thirdType: "",
    projectId: 1,
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
  },
  two: {
    indicatorName: "高效日达标分析",
    firstType: "节电分析",
    secondType: "",
    type: "year",
    thirdType: "",
    projectId: 1,
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
  },
  three: {
    indicatorName: "过去十二个月能耗",
    firstType: "节电分析",
    secondType: "",
    // type: "year",
    thirdType: value2.value,
    projectId: 1,
    dataType: "month",
    dayFrom: dayjs().subtract(12, "M").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
    // projectId: "1",
  },
});
onMounted(() => {
  one();
  two();
  three();
  // 获取DOM元素并且进行初始化
});
const opened = () => {
  nextTick(() => {
    let myChart4 = echarts.init(four.value);
    myChart4.setOption({
      tooltip: {
        trigger: "axis",
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          name: "年",
          data: ["2019", "2020", "2021", "检测年"],
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "能耗（kWh）",
          axisLine: {
            // x轴线隐藏，但不隐藏背景线
            show: true,
          },
        },
      ],
      series: [
        {
          type: "bar",
          barWidth: "60%",
          data: [20000, 14000, 22000, 18000],
        },
      ],
    });
  });
};
async function one() {
  let { data: res } = await ProjectGroupone(state.one);
  console.log(res, "高校日对比");
  var byear = [];
  var num = [];
  var num2 = [];

  res.data.commonDailyDataList.forEach((item) => {
    console.log();
    byear.push(`${item.day.substring(5, 10)}`);

    if (item.type == "type1") {
      num.push(item.number1);
    }
    if (item.type == "type2") {
      num2.push(item.number1);
    }
  });

  let list = [...new Set(byear)];
  console.log(list, "shijian");

  let myChart = echarts.init(document.getElementById("one"));
  myChart.setOption({
    title: {
      text: "高效日对比",
      textStyle: {
        color: "#8f9898",
      },
      left: 0,
      top: 20,
    },
    xAxis: {
      name: "月",
      data: [
        "00:00",
        "02:00",
        "04:00",
        "06:00",
        "08:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
        "24:00",
      ],
    },
    yAxis: {
      name: "KMB/m²",
      type: "value",
      axisLine: {
        // x轴线隐藏，但不隐藏背景线
        show: true,
      },
    },
    grid: {
      left: "3%",
      right: "7%",
      bottom: "10%",
      top: "25%",
      containLabel: true,
    },
    legend: {
      right: 300,
      top: 20,
      itemWidth: 20,
      itemHeight: 1,
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        data: num,
        type: "line",
        name: "高效日",
        smooth: true,
        areaStyle: {
          color: "#e7f4db",
        },
        color: "#92d050",
      },
      {
        data: num2,
        type: "line",
        name: "选择日",
        smooth: true,
        areaStyle: {
          color: "#fdf2ce",
          opacity: 0.5,
        },
        color: "#fed34f",
      },
    ],
  });
}

async function two() {
  let { data: res } = await ProjectGroupone(state.two);
  console.log(res, "高效对比达标1111111");
  var byear = [];
  var num = [];
  var num2 = [];
  var num3 = [];
  res.data.commonDailyDataList.forEach((item) => {
    console.log();
    byear.push(`${item.day.substring(0, 7)}`);

    if (item.type == "type1") {
      num.push(item.number1);
    }
    if (item.type == "type2") {
      num2.push(item.number1);
    }
    if (item.type == "type3") {
      num3.push(item.number1);
    }
  });

  let list = [...new Set(byear)];
  console.log(list, "shijian");
  let myChart2 = echarts.init(document.getElementById("two"));

  let arr = [0, 1, 0, 1, 0, 1, 0, 1, 0, 1]; //修改数组中的值来判断柱子的颜色
  console.log(arr);
  // 创建图标

  myChart2.setOption({
    title: {
      text: "高效日达标分析",
      left: 25,
      textStyle: { color: "#8f9898" },
    },
    legend: [
      {
        right: 330,
        top: 5,
        itemWidth: 15,
        data: ["达标", "不达标"],
      },
      {
        right: 450,
        top: 7,
        itemWidth: 15,
        itemHeight: 1,
        data: ["高效日"],
      },
    ],
    grid: {
      left: "15%",
      right: "7%",
      bottom: "3%",
      top: "22%",
      containLabel: true,
    },
    xAxis: [
      {
        name: "年",
        data: [
          "4/20",
          "4/21",
          "4/22",
          "4/23",
          "4/24",
          "4/25",
          "4/26",
          "4/27",
          "4/28",
        ],
      },
    ],
    yAxis: [
      {
        name: "RMB/m²",
        type: "value",
        axisLine: {
          // x轴线隐藏，但不隐藏背景线
          show: true,
        },
      },
    ],
    tooltip: {
      trigger: "axis",
    },
    series: [
      // {
      //   type: "bar",
      //   barWidth: "60%",
      //   name: "达标",
      //   data: num,
      //   itemStyle: {
      //     normal: {
      //       color: function (params) {
      //         if (arr[params.dataIndex] === 1) {
      //           return "#d6ebfa";
      //         } else if (arr[params.dataIndex] === 0) {
      //           return "#0070c0";
      //         }
      //         console.log(params);
      //       },
      //     },
      //   },
      // },
      // {
      //   type: "bar",
      //   name: "不达标",
      //   data: num2,
      //   color: "#d6ebfa",
      // },
      // {
      //   type: "line",
      //   name: "高效日",
      //   symbol: "none",
      //   data: num3,
      //   color: "#0db459",
      // },
    ],
  });
}
const handleMonth = (val) => {
  three(val);
};
async function three(type = "kwh") {
  const three = {
    indicatorName: "过去十二个月能耗",
    firstType: "节电分析",
    secondType: "",
    // type: "year",
    thirdType: "",
    projectId: 1,
    dataType: "month",
    dayFrom: dayjs().subtract(12, "M").format("YYYY-MM-DD"),
    dayTo: dayjs().format("YYYY-MM-DD"),
    // projectId: "1",
  };
  // 暂时由前端本地存储获取
  let res = await dataMonth(three);
  var byear = [];
  var num = [];
  var num2 = [];
  var num3 = [];
  res.data.data.commonMonthlyDataList.forEach((item) => {
    byear.push(`${item.day.substring(0, 7)}`);
    if (item.type == "type1") {
      num.push(item.number1);
    }
    if (item.type == "type2") {
      num2.push(item.number1);
    }
    if (item.type == "type3") {
      num3.push(item.number1);
    }
  });
  let list = [...new Set(byear)];
  console.log(list, res, "shijian");
  console.log(num);

  let { data: ress } = await AdminInputs({ id: 1 });
  if (ress) {
    const unit = JSON.parse(ress.data.list[0].unit);
    const { electric_kgco, electric_tce } = unit;
    if (type == "rmb") {
      let data = [];
      num.forEach((item) => {
        data.push((item * 0.79).toFixed(2));
      });
      num = data;
    } else if (type == "kgCO2") {
      let data = [];
      num.forEach((item) => {
        data.push((item * electric_kgco).toFixed(2));
      });
      num = data;
    } else if (type == "tce") {
      let data = [];
      num.forEach((item) => {
        data.push((item * electric_tce).toFixed(2));
      });
      num = data;
    }
  }

  // const electric = JSON.parse(localStorage.getItem("electric"));
  // const electric2 = JSON.parse(localStorage.getItem("electric2"));
  // const electric3 = JSON.parse(localStorage.getItem("electric3"));
  // console.log(electric, electric2, electric3, 528);
  // const num = electric.filter((item) => item.name == type)[0].value;
  // const num2 = electric2.filter((item) => item.name == type)[0].value;
  // const num3 = electric3.filter((item) => item.name == type)[0].value;
  let myChart3 = echarts.init(document.getElementById("three"));
  myChart3.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      top: 10,
      right: 30,
      itemWidth: 20,
      itemHeight: 1,
    },
    grid: {
      left: "3%",
      right: "5%",
      bottom: "5%",
      top: "25%",
      containLabel: true,
    },
    xAxis: {
      data: list,
      name: "月",
    },
    yAxis: {
      type: "value",
      name: type + "/m²",
    },
    series: [
      {
        name: "往年同期",
        type: "line",
        stack: "Total",
        data: num2,
        color: "#d90909",
      },
      {
        name: "实际能耗",
        type: "line",
        stack: "Total",
        data: num3,
        color: "#ffc40f",
      },
      {
        name: "能耗预算",
        type: "line",
        stack: "Total",
        data: num,
        color: "#dddddd",
      },
    ],
  });
}
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
  padding: 0;
}

.box {
  display: flex;

  .one {
    flex: 1;
    margin-right: 4px;

    .one_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      color: #7e7e7e;
      padding: 20px 0;
      border-bottom: 3px solid #dbe0ed;

      .qm {
        width: 100%;
        display: flex;
        align-items: end;
        justify-content: space-around;

        .num {
          color: #277bcb;
          font-size: 20px;
        }
      }

      .wn {
        width: 100%;
        display: flex;
        align-items: end;
        justify-content: space-around;

        .num {
          font-size: 20px;
          color: #277bcb;
        }
      }
    }

    .two_box {
      margin-top: 14px;
      position: relative;

      .sele {
        font-size: 15px;
        position: absolute;
        top: 1px;
        left: 30px;
      }
    }

    .end {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 3px solid #f3f5f9;

      .el-button {
        color: white;
        background-color: #8faadc;
      }
    }

    .end_two {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 15px;
      color: #7e7e7e;
      margin-top: 25px;

      .fon_css {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
      }

      :deep(.el-button + .el-button) {
        margin: 0;
      }
    }
  }

  .two {
    flex: 1;
    margin-left: 2px;

    .title {
      padding: 15px 20px;
      font-size: 20px;
      color: #6d83b7;
      font-weight: 600;
      border-bottom: 3px solid #f3f5f9;
    }

    .qwe {
      position: relative;
      border-bottom: 3px solid #f3f5f9;
      margin: 0 20px 20px 20px;
      box-sizing: border-box;

      .rq {
        position: absolute;
        top: 15px;
        right: 20px;
      }
    }

    .t_two {
      position: relative;

      .rqs {
        position: absolute;
        top: 1px;
        right: 20px;
      }

      .aa {
        position: absolute;
        top: 40px;
        left: 30px;
      }
    }
  }
}

.dia_font {
  color: #4d62a5;
  font-size: 24px;
}

:deep(.el-dialog) {
  border-radius: 5px;
}

:deep(.el-dialog__header) {
  border-bottom: 3px solid #f1f3f7;
}

:deep(.el-dialog__close) {
  font-size: 24px;
  color: #4d62a5;
}
</style>
